import 'dart:ui';

import 'package:bruno/bruno.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/src/simple/get_view.dart';
import 'package:untitled/font/mine_font.dart';
import 'package:untitled/router/routes.dart';
import 'mine_page_controller.dart';

class MinePage extends GetView<MineController> {
  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: MineController(),
      builder: (MineController ctl) => Scaffold(
          resizeToAvoidBottomInset: false,
          body: Stack(
            children: [
              Positioned.fill(
                  child: Stack(
                children: [
                  Padding(
                    padding: const EdgeInsets.fromLTRB(30, 50, 30, 50),
                    child: Container(
                        height: 180,
                        decoration: const BoxDecoration(
                          color: Color.fromARGB(255, 0, 128, 255),
                          borderRadius: BorderRadius.all(Radius.circular(15.0)),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(0, 0, 0, 55),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(
                                child: Row(
                                  children: [
                                    const SizedBox(
                                      width: 40,
                                    ),
                                    //头像
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(100),
                                      child: Container(
                                        height: 85,
                                        width: 85,
                                        child: Image.network(
                                            'https://pics5.baidu.com/feed/9213b07eca806538115e4444ab709b4cac348262.png?token=54ff6ece672a6e2efaa311fe82a0a19f'),
                                      ),
                                    ),
                                    const SizedBox(
                                      width: 20,
                                    ),
                                    //个人信息
                                    Align(
                                      alignment: Alignment.centerLeft,
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          const Text(
                                            "昵称昵称",
                                            style: TextStyle(
                                                fontSize: 23,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.white),
                                          ),
                                          const Text(
                                            "地理位置",
                                            style: TextStyle(
                                                fontSize: 14,
                                                fontWeight: FontWeight.w100,
                                                color: Colors.white),
                                          ),
                                          userTag(),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              IconButton(
                                  onPressed: () {
                                    controller.onSettingClickListener(context);
                                  },
                                  icon: Icon(
                                    MineFont.setting,
                                    color: Colors.white,
                                  )),
                              const SizedBox(
                                width: 10,
                              )
                            ],
                          ),
                        )),
                  ),
                ],
              )),
              Positioned(
                top: 175,
                left: 0,
                right: 0,
                bottom: 0,
                child: ClipRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 60, sigmaY: 60),
                    child: Container(
                      decoration: const BoxDecoration(
                          border: Border(
                              top:
                                  BorderSide(color: Colors.white, width: 0.5))),
                      child: Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.fromLTRB(30, 30, 30, 80),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: mineTopMenu(context),
                            ),
                          ),
                          Padding(
                              padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
                              child: Column(
                                children: mineDetailedMenus(context),
                              ))
                        ],
                      ),
// 透明背景，以便看到下面的内容
                    ),
                  ),
                ),
              ),
            ],
          )),
    );
  }

  userTag() {
    return Align(
      alignment: Alignment.centerLeft,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Icon(
            MineFont.male,
            color: Colors.white,
            size: 18,
          ),
          const SizedBox(
            width: 5,
          ),
          Container(
              decoration: const BoxDecoration(
                  color: Color.fromARGB(255, 209, 209, 209),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Padding(
                  padding: const EdgeInsets.fromLTRB(5, 2, 8, 2),
                  child: Row(
                    children: [
                      Container(
                        decoration: const BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          color: Color.fromARGB(255, 29, 66, 98),
                        ),
                        child: const Padding(
                          padding: EdgeInsets.all(3),
                          child: Text(
                            "KM",
                            style: TextStyle(
                                fontWeight: FontWeight.w100,
                                fontSize: 8,
                                color: Colors.white),
                          ),
                        ),
                      ),
                      const Text(
                        "148.2",
                        style: TextStyle(
                            color: Color.fromARGB(255, 86, 102, 123),
                            fontSize: 14),
                      ),
                    ],
                  )))
        ],
      ),
    );
  }

  List<Widget> mineTopMenu(context) {
    List<Widget> inkList = [];
    for (var element in controller.mineTopMenus) {
      var ink = InkWell(
        onTap: () {
          BrnToast.show(element['route'], context);
          // Routes.push(element['route']);
        },
        child: Container(
          width: 75,
          height: 75,
          decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(10)),
              border: Border.all(color: Colors.white, width: 0.5)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                IconData(element['iconData'],
                    fontFamily: 'iconfont', matchTextDirection: true),
                size: 20,
                color: Colors.white,
              ),
              Text(
                element['name'],
                style: const TextStyle(color: Colors.white, fontSize: 12),
              )
            ],
          ),
        ),
      );
      inkList.add(ink);
    }
    return inkList;
  }

  List<Widget> mineDetailedMenus(context) {
    List<Widget> menus = [];
    for (var element in controller.mineDetailMenus) {
      menus.add(Container(
        decoration: const BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    color: Color.fromARGB(255, 222, 222, 222), width: 0.5))),
        child: BrnTextSelectFormItem(
          title: element['name'],
          themeData: BrnFormItemConfig(
              titleTextStyle: BrnTextStyle(
                  color: const Color.fromARGB(255, 131, 131, 131),
                  fontWeight: FontWeight.w300)),
          hint: '',
          onTap: () {
            BrnToast.show(element['route'], context);
          },
          backgroundColor: const Color.fromARGB(0, 0, 0, 0),
        ),
      ));
    }
    return menus;
  }
}
